 <{assign var=defaultImage value=app::get('image')->getConf('image.set')}>
<{assign var=defaultImage value=$defaultImage['S']['default_image']}>
<div class="TopBrandList" id="TopBrandList_<{$widgets_id}>">
  <ul>
    <{foreach from=$data item=adata key=key}>
    <{if $key < $setting.showing}>
    <li class="l<{$key+1}> dotsep hl">
      <div class="num"><{$key+1}></div>
      <div class="goods-pic switchable-panel-acc" style="display:none; overflow:hidden;text-align:center;vertical-align:center;"> <a href="<{link app=b2c ctl=site_product act=index arg=$adata.goods_id}>" target="_blank" title="<{$adata.name}>"> <{if $adata.udfimg == 'true'}>
        <{img src="transparent.gif" app="b2c"  lazyload=$adata.thumbnail_pic|storager}>
        <{elseif $adata.image_default_id}>
        <{img src="transparent.gif" app="b2c"  lazyload=$adata.image_default_id|storager:'s'}>
        <{else}>
        <{img src="transparent.gif" app="b2c"  lazyload=$defaultImage|storager}>
        <{/if}> </a>
        <ul class="goods-info">
          <li><{$setting.mktPriceText|default:$___b2c='市场价'|t:'b2c'}><{$setting.mktPriceSep|default:':'}><del><{$adata.mktprice|cur_odr}></del></li>
          <li><{$setting.priceText|default:$___b2c='销售价'|t:'b2c'}><{$setting.priceSep|default:':'}><em class='TopBrandList-price'><{$adata.price|cur_odr}></em></li>
        </ul>
      </div>
      <div class="switchable-trigger-acc"><a href="<{link app=b2c ctl=site_product act=index arg=$adata.goods_id}>" target="_blank" title="<{$adata.name}>" style="color:<{$setting.fontColor}>;<{$setting.fontStyle|styleset}>"><{$adata.name|cut:$setting.maxlength}></a></div>
    </li>
    <{else}>
    <li class="l<{$key+1}> dotsep">
      <div class="num"><{$key+1}></div>
      <div class="goods-pic switchable-panel-acc" style="display:none; overflow:hidden;text-align:center;vertical-align:center;"> <a href="<{link app=b2c ctl=site_product act=index arg=$adata.goods_id}>" target="_blank" title="<{$adata.name}>"> <{if $adata.udfimg == 'true'}>
        <{img src="transparent.gif" app="b2c"  lazyload=$adata.thumbnail_pic|storager}>
        <{elseif $adata.image_default_id}>
        <{img src="transparent.gif" app="b2c"  lazyload=$adata.image_default_id|storager:'s'}>
        <{else}>
        <{img src="transparent.gif" app="b2c"  lazyload=$defaultImage|storager}>
        <{/if}> </a>
        <ul class="goods-info">
          <li><{$setting.mktPriceText|default:$___b2c='市场价'|t:'b2c'}><{$setting.mktPriceSep|default:':'}><del><{$adata.mktprice|cur_odr}></del></li>
          <li><{$setting.priceText|default:$___b2c='销售价'|t:'b2c'}><{$setting.priceSep|default:':'}><em class='TopBrandList-price'><{$adata.price|cur_odr}></em></li>
        </ul>
      </div>
      <div class="switchable-trigger-acc"><a href="<{link app=b2c ctl=site_product act=index arg=$adata.goods_id}>" target="_blank" title="<{$adata.name}>" style="color:<{$setting.fontColor2}>;<{$setting.fontStyle2}>"><{$adata.name|cut:$setting.maxlength}></a></div>
    </li>
    <{/if}>

    <{/foreach}>
  </ul>
</div>
<style>
.TopBrandList li {
	background:url(images/dotted.gif) repeat-x 0 bottom;
	padding:6px 0 6px 0;
	margin:0;
	position:relative;
	float:left;
	width:100%;
	height:16px;
	overflow:hidden;
}
.TopBrandList .hover{
	height:72px;
	overflow:hidden;
}
.TopBrandList img{
	float:left;
	padding-right:10px;
	width:70px;
	height:70px;
}
.TopBrandList .hover .num{
	position:absolute;
	background:url(images/top_cen.gif) no-repeat;
	width:9px;
	height:23px;
	color:#FFF;
	font-size:12px;
	text-align:center;
	padding-right:14px;
}
.TopBrandList .goods-info{
	float:left;
	width:110px;
	overflow:hidden;
	padding-top:40px;
}
.TopBrandList ul{
	padding:0;
	margin:0;
}
.TopBrandList .goods-info li {
	background:none;
	padding:0;
	text-align:left;
	margin:0;
}
.TopBrandList-price {
	color:#ff0000;
	font-size:12px;
}
.TopBrandList .num{
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#40517A;
	font-weight:bold;
	padding-right:5px;
	font-style:italic;
	display:inline-block;
	float:left;
}
.TopBrandList .switchable-trigger-acc{
	float:left;
	overflow:hidden;
	display:block;
	height:14px;
	width:86%;
}
.TopBrandList .active{
	position:absolute;
	left:80px;
	top:5px;
	height:30px;
	overflow:hidden;
	width:59%;
}
</style>
<script>
  window.addEvent('domready', function(){
  	new  Accordion('TopBrandList_<{$widgets_id}>',{eventType:'mouse',
		img:"lazyload",
		lazyDataType:'img',
		triggers:'.switchable-trigger-acc',
		panels:'.switchable-panel-acc',
		content:'.switchable-content-acc',
	onInit: function(){
		$(this.triggers[0]) && $(this.triggers[0]).addClass('active');
		this.panels[0].setStyle('display', 'block');
		this.container.getElements('li.dotsep')[0].addClass('hover');
	},
	onSwitch: function(args){
		var lis = this.container.getElements('li.dotsep');
		if(lis){
			lis.removeClass('hover');
			lis[args.currentIndex].addClass('hover');
		}
	}});
  });
</script>